<markdown>
# 自定义选项渲染

你可以使用 插槽 `#label` 自定义
</markdown>

<template>
  <x-select v-model:value="value" :options="options">
    <template #label="{ option, index }">
      <div style="display: flex; align-items: center">
        <x-icon style="margin-right: 4px" type="recommend" color="#0078d7" :size="20" />
        <span style="margin-right: 4px">{{ option.label }}</span>
        <x-tag>{{ index }}</x-tag>
      </div>
    </template>
  </x-select>
</template>

<script setup>
import { ref } from 'vue'

const value = ref('大白菜')

const options = ['大白菜', '鸡毛菜', '空心菜', '油麦菜'].map(val => ({
  label: val,
  value: val
}))
</script>
